feat(chat): production-ready visual redesign (0.0.3)#157
Merged
Conversation
The 0.0.2 publish workflow run failed with 'error retrieving identity token' on @ngaf/licensing and @ngaf/partial-json, and a 404 on @ngaf/a2ui. Root cause: actions/setup-node@v6.3.0 with node-version: 22 ships npm 10.9.2, which has partial OIDC code paths but doesn't fully implement the trusted-publishing flow against npm registry's OIDC endpoint. npm 11.5.1+ is required for trusted publishing. Adding 'npm install -g npm@latest' before the publish step bumps the runner to a current release. Sources: - https://philna.sh/blog/2026/01/28/trusted-publishing-npm/ - npm/cli#8730 - https://docs.npmjs.com/trusted-publishers/ Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Verified against a fresh-install consumer of @ngaf/chat@0.0.2: without Tailwind configured (and without `@source "../node_modules/@ngaf/chat"`), ChatComponent's utility classes (flex, gap-3, max-w-[75%], md:flex, ...) are tree-shaken away and the chat collapses to a column of unstyled full-width blocks. The library does not ship a precompiled stylesheet, so this is a hard consumer-side requirement. Surface it explicitly: - Quickstart gets a Tailwind setup step between install and provider config. - Installation Requirements step calls out Tailwind v4 alongside Angular 20+ and Node 18+. - Tailwind CSS section is rewritten with concrete steps (postcss config, @import, @source) rather than just an `npm install` line. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Design for production-ready chat UI overhaul: asymmetric message pattern (user bubble + assistant inline), three layout modes (embedded, popup, sidebar), shared chat-trace primitive driving tool calls / subagents / timeline, complete Tailwind removal with encapsulated component styles + optional global chat.css. Settled architecture decisions: - Three separate compositions over a unified mode-switching one. - Hybrid styling: component-encapsulated + CSS vars + optional global stylesheet for deep overrides. - In-place rewrite of <chat>; coordinated breaking-change PR updates all 19 cockpit demos + libs/example-layouts + website docs in one shot. Ships as 0.0.3 (patch-only policy). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
56-task plan covering tokens (Phase 1), new primitives (Phase 2), existing primitive rewrites (Phase 3), trace-based card rewrites (Phase 4), top-level compositions (Phase 5), debug + interrupt panel (Phase 6), library cleanup + 0.0.3 bump (Phase 7), example-layouts (Phase 8), 19 cockpit demos (Phase 9), website docs (Phase 10), and verification + PR (Phase 11). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Renames the ChatMessagesComponent primitive to ChatMessageListComponent with selector chat-message-list, adds dedicated host styles, and updates all consumers (chat composition, chat-debug composition, public-api). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Replaces Tailwind-based layout + inline avatar markup with CSS-custom-property shell layout; wraps each message role in <chat-message> inside the per-role templates; adds <chat-tool-calls> and <chat-subagents> inside the assistant wrapper; introduces prevRole() helper for spacing context. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Replace Tailwind utility classes with hand-written BEM CSS, rename all --chat-* tokens to --ngaf-chat-*, and add CHAT_HOST_TOKENS to styles array. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Replace all Tailwind utility classes with hand-written BEM CSS, rename --chat-* tokens to --ngaf-chat-* across all 8 debug component files, and add CHAT_HOST_TOKENS to every styles array. Inline markdown styles in chat-debug updated to use new token names. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…ration) - cockpit-chat-input: ChatMessagesComponent → ChatMessageListComponent, <chat-messages> → <chat-message-list>, --chat-* → --ngaf-chat-* - cockpit-chat-messages: same rename + token migration; e2e selector chat-messages → chat-message-list - cockpit-chat-theming: THEMES map and template updated to --ngaf-chat-* token names Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Remove Tailwind requirement, update peer deps, add optional chat.css import, rewrite quickstart to 3-step no-setup flow, and rewrite theming guide with full --ngaf-chat-* token table, light/dark switching, three override paths, and migration note for old --chat-* tokens. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…es guide - Rename chat-messages.mdx → chat-message-list.mdx; update selector and class name throughout - Add chat-popup.mdx, chat-sidebar.mdx, chat-trace.mdx component pages - Add guides/layout-modes.mdx comparing embedded/popup/sidebar modes - Update --chat-* token references to --ngaf-chat-* in all existing component pages (chat-input, chat-interrupt-panel, chat-subagent-card, chat-tool-call-card) - Drop CHAT_THEME_STYLES/CHAT_MARKDOWN_STYLES from chat.mdx; note asymmetric message pattern - Add new pages and layout-modes to docs-config.ts navigation Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
blove
changed the title
The click handler on the pill div violated angular-eslint's template/click-events-have-key-events and template/interactive-supports-focus rules. The textarea inside the pill receives focus natively when its visible area is clicked, so the handler was a redundant convenience. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Coordinated rewrite of @ngaf/chat for production-grade visual quality. Three new layout modes (embedded/popup/sidebar), asymmetric message pattern (user bubble + assistant inline), shared chat-trace primitive driving tool calls/subagents/timeline, complete Tailwind removal in favor of component-encapsulated styles + optional @ngaf/chat/chat.css.
Closes the v0.0.2 publish friction this PR originally documented: consumers no longer need any Tailwind setup. `npm install @ngaf/chat` + drop `` in a template = working chat.
Spec & Plan
What changed
New components:
Rewrites:
Renamed:
Removed:
Token namespace renamed: `--chat-` → `--ngaf-chat-`
Updated downstream:
Migration
```css
/* Before (0.0.2) — required */
@import "tailwindcss";
@source "../node_modules/@ngaf/chat";
/* After (0.0.3) — optional /
@import '@ngaf/chat/chat.css'; / only if you want :root token / global-class overrides */
```
```ts
// Before
import { ChatMessagesComponent, CHAT_THEME_STYLES } from '@ngaf/chat';
// After
import { ChatMessageListComponent } from '@ngaf/chat';
// CHAT_THEME_STYLES removed; tokens auto-apply via component encapsulation.
```
CSS variable consumers: rename `--chat-` → `--ngaf-chat-` (e.g., `--chat-bg` → `--ngaf-chat-bg`).
Test plan
🤖 Generated with Claude Code